<!--
  *@Description : 添加收货地址组件
  *@author 萧红
  *@date 2020-04-05 20:11
  *@LastEditTime 2020-04-05 20:11
  *@LastEdititors
-->
<template>
    <div id="addaddress">
      <tittle :title="'添加收货地址'"></tittle>
      <div class="item">
        <input type="text" maxlength="10" v-model="reserveName" placeholder="收件人">
      </div>
      <div class="item">
        <input type="number" v-model="phone" placeholder="联系电话">
      </div>
      <div class="item" @click="showCascadePicker">
        {{!selectedProvince?'请选择省':selectedProvince}}
        <i class="cubeic-select"></i>
      </div>
      <div class="item" @click="showCascadePicker">
        {{!selectedCity?'请选择市':selectedCity}}
        <i class="cubeic-select"></i>
      </div>
      <div class="item" @click="showCascadePicker">
        {{!selectedCounty?'请选择县/区':selectedCounty}}
        <i class="cubeic-select"></i>
      </div>
      <div class="item">
        <input type="text" placeholder="详细地址" maxlength="30" v-model="address">
      </div>
      <div class="item">
        <cube-checkbox v-model="isDefault" class="checkbox">
            设置为默认地址
        </cube-checkbox>
      </div>
      <div class="bottom" @click="confirmClick">
        <i class="iconfont iconqueding"></i>
       <span>保存更改</span>
      </div>
    </div>
</template>

<script>
import province from '../../common/js/city'
import Tittle from '../../components/Tittle'
export default {
  name: 'AddAddress',
  components: {
    Tittle
  },
  data () {
    return {
      isDefault: false, // 默认收货地址
      reserveName: '', // 收件人姓名
      phone: '', // 收件人手机号
      province: [], // 地址数据结构
      selectedProvince: '', // 选择的省区
      selectedCity: '', // 选择的城市
      selectedCounty: '', // 选择的县区
      address: '' // 详细地址
    }
  },
  created () {
    province.forEach(pro => {
      pro.city.forEach(cityItem => {
        cityItem.districtAndCounty = cityItem.districtAndCounty.map(xian => {
          let temp = {name: xian}
          return temp
        })
        cityItem.children = cityItem.districtAndCounty
        delete cityItem.districtAndCounty
      })
      pro.children = pro.city
      delete pro.city
    })
    this.province = province
    // console.log(this.province)
  },
  mounted () {
    this.cascadePicker = this.$createCascadePicker({
      title: '选择地址',
      data: this.province,
      selectedIndex: [0, 0, 0],
      onSelect: this.selectHandle,
      alias: {
        value: 'name', text: 'name'
      }})
  },
  methods: {
    selectHandle (selectedVal) {
      console.log(selectedVal)
      this.selectedProvince = selectedVal[0]
      this.selectedCity = selectedVal[1]
      this.selectedCounty = selectedVal[2]
    },
    showCascadePicker () {
      this.cascadePicker.show()
    },
    confirmClick () {
      let patter = /^1[3,5,7,8,9][0-9]{9}/ // 验证手机号的正则表达式
      if (!this.reserveName) {
        this.$toast('请输入收件人')
        return false
      } else if (!patter.test(this.phone)) {
        this.$toast('请输入正确的手机号(11位)')
        return false
      } else if (!this.selectedProvince) {
        this.$toast('请选择省')
        return false
      } else if (!this.selectedCity) {
        this.$toast('请选择市')
        return false
      } else if (!this.selectedCounty) {
        this.$toast('请选择县/区')
        return false
      } else if (!this.address) {
        this.$toast('请输入详细地址')
        return false
      }
      let params = {
        name: this.reserveName,
        userId: localStorage.getItem('userId'),
        phone: this.phone,
        province: this.selectedProvince,
        city: this.selectedCity,
        county: this.selectedCounty,
        address: this.address,
        default: this.isDefault ? 1 : 0
      }
      this.apis.addAddress(params).then(res => {
        if (res.code === 200) {
          this.$toast('添加地址成功', 'correct', 1500)
          setTimeout(() => {
            this.$router.back()
          }, 1500)
        } else {
          this.$toast(res.msg, 'error')
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#addaddress
{
  text-align left
  .item
  {
    width: 100%
    height: 20px
    line-height: 16px
    box-sizing border-box
    padding 2px 5px
    border-bottom 1px solid #f0f0f0
    color #555
    overflow hidden
    .checkbox
    {
      width 100%
      padding 0px!important
    }
    input
    {
      width 100%
      min-height:15px
      outline none
    }
    i
    {
      float right
      font-size 9px
    }
  }
  .bottom
  {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align center
    background: #ff4466;
    display flex
    flex-flow row nowrap
    justify-content center
    align-items center
    position: fixed;
    left: 0px;
    bottom: 0px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    z-index: 2;
    color:snow
    font-size 7px
    span
    {
      margin-left 5px
    }
  }
}
</style>
